<template>
  <div>
    <van-nav-bar title="邀请码" left-arrow @click-left="backUp"></van-nav-bar>
    <div class="register">
      <van-cell-group>
        <van-field
          type="tel"
          placeholder="请输入手机号码"
          label="手机号码"
          v-model="data.phone"
          :error-message="errorMsg.phone"
          clearable
        ></van-field>
        <van-field
          center
          v-model="data.code"
          label="短信验证码"
          placeholder="请输入验证码"
          :error-message="errorMsg.code"
          clearable
        >
          <van-button
            slot="button"
            size="small"
            type="warning"
            :disabled="countdown > 0"
            @click="sendMobileCode"
          >{{ countdown ? countdown + 's' : '发送'}}</van-button>
        </van-field>
        <van-field
          type="tel"
          placeholder="请输入邀请码"
          label="邀请码"
          v-model="data.inviteCode"
          :error-message="errorMsg.inviteCode"
          clearable
        ></van-field>
      </van-cell-group>
      <div class="register-btn">
        <van-button block type="warning" @click.stop="save">保存</van-button>
      </div>
    </div>
  </div>
</template>
<script>
// import {Field, CellGroup, Cell, Button, Toast} from 'vant';
import { Field, Icon, Button, Cell, CellGroup, NavBar, Toast } from "vant";

import validator from "@/utils/validation.js";
import url from "@/utils/api.js";

export default {
  name: "invite",
  components: {
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      countdown: 0,
      data: {
        phone: "",
        code: "",
        inviteCode: ""
      },
      errorMsg: {
        phone: "",
        code: "",
        inviteCode: ""
      },
      rules: {
        phone: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback("手机号码不能为空");
              } else if (/^[1][3-9][0-9]{9}$/.test(value)) {
                callback();
              } else {
                callback("请输入正确的手机号码");
              }
            },
            trigger: "blur"
          }
        ],
        code: [{ required: true, message: "请输入验证码" }],
        inviteCode: [{ required: true, message: "请输入邀请码" }]
      }
    };
  },
  methods: {
    backUp() {
      this.$router.go(-1);
    },
    save() {
      this.validate((errors, fields) => {
        console.log(errors, fields);
        if (!errors) {
          this.$axios({
            method: "post",
            url: url.bindcode,
            data: this.$qs.stringify({
              token: localStorage.getItem("token"),
              phone: this.data.phone,
              sms_code: this.data.code,
              invite_code: this.data.inviteCode
            })
          }).then(res => {
            console.log(res);
          });
        }
      });
    },
    sendMobileCode() {
      this.validate(errors => {
        if (!errors) {
          Toast("发送成功");
          this.countdown = 60;
          this.countdownSubtract();
        }
      }, "phone");
      this.$axios({
        method: "post",
        url: url.sendsms,
        data: this.$qs.stringify({
          phone: this.data.phone,
          token: localStorage.getItem("token")
        })
      }).then(res => {
        console.log(res);
        localStorage.setItem("token", res.token);
      });
    },
    countdownSubtract() {
      if (this.countdown > 0) {
        setTimeout(() => {
          this.countdown -= 1;
          this.countdownSubtract();
        }, 1000);
      }
    },
    validate(callback, data) {
      this.validator.validate((errors, fields) => {
        if (errors) {
          fields.forEach(item => {
            this.errorMsg[item.field] = item.message;
          });
        }
        callback && callback(errors, fields);
      }, data);
    }
  },
  created() {
    this.validator = validator(this.rules, this.data);
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";
.register {
  background-color: @borderColor;
  // background-color: #f00;

  // border: 1px solid red;
  height: calc(100vh - 1.3rem);
  .van-cell-group {
    padding: 0 20px;
  }
}
.register-btn {
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  button {
    // border:1px solid red;
    height: 0.9rem;
    line-height: 0.9rem;
    // flex-basis: 40%;
    width: 90%;
    padding: 0;
    border-radius: 20px;
  }
  button:first-child {
    transform: translateY(0);
  }
}
.mt10 {
  margin-top: 10px;
}
/deep/ .van-field__button {
  background-color: transparent;
  // border: 1Px solid @priColor;
  padding: 0;
  .van-button {
    border-radius: 16px;
  }
}
/deep/ .van-cell {
  .font-dpr(40px) !important;
}
</style>
